<template>
  <div class="border-line card">
    <header-title title="资产处置类型占比" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <echarts-view :options="option" height="180px"></echarts-view>
    </div>
  </div>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import { getGDZCCZ } from '@/api/datacharts'
import BigNumber from 'bignumber.js'
export default {
  components: {
    headerTitle,
    echartsView
  },
  data () {
    return {
      option: {}
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      getGDZCCZ().then((res) => {
        this.option = {
          grid: {
            left: 0,
            right: 0,
            top: '14%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                backgroundColor: 'rgb(22, 245, 255,.8)'
              }
            }
          },
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(17, 240, 221, 1)' }, // 设置颜色渐变
                { offset: 1, color: 'rgba(0, 33, 30, 0)' }
              ]
            }
          ],
          xAxis: {
            type: 'category',
            data: res.map((e) => e.name),
            axisTick: {
              // 刻度线
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              // 网格线
              show: false,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(127, 214, 255, 1)'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisTick: {
              // 刻度线
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              // 网格线
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(127, 214, 255, 1)'
              }
            }
          },
          series: [
            {
              data: res.map((e) => new BigNumber(e.value).times(100).toFixed(2)),
              type: 'pictorialBar',
              symbol: 'triangle',
              showBackground: true,
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: '{c}%'
              },
              backgroundStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          ]
        }
      })
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 244px;
  &-content {
    margin-top: 20px;
  }
}
</style>
